<template>
  <div class="rule-box">
    <a-space :size="22" direction="vertical">
      <page-form ref="formRef" :model="todoDetail" :rules="rules" layout="vertical" class="rule-container">
        <!-- 订单待办 -->
        <card :headerStyle="{ padding: '0 0 20px' }" title="订单待办" :showDivider="false">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">即将交车</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.giveSoonStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后,即将交车的订单将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <page-form-item size="1" field="giveTimeBefore" class="w-full body">
                  距离订单的预计用车时间前&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.giveTimeBefore"
                    :min="1"
                    :max="480"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;触发待办提醒。
                </page-form-item>
              </section>
            </page-form-item>
            <a-divider />
          </page-form-row>
        </card>
        <!-- 运维待办 -->
        <card class="custom-card" :headerStyle="{ padding: '0 0 20px' }" title="运维待办" :showDivider="false">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">GPS异常</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.carVehicleErrorStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后绑定GPS的车辆离线超时将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <page-form-item class="w-full body" field="carVehicleErrorStatus">
                  GPS连续离线超过&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carVehicleOfflineDay"
                    :min="1"
                    :max="30"
                    :defaultValue="1"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;触发待办提醒。
                </page-form-item>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="carAbnormalMoveStatus">
              <section>
                <div class="flex">
                  <span class="title">车辆异动</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.carAbnormalMoveStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后绑定GPS的车辆异动将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  处于空闲可租车辆的行驶轨迹距离大于&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carMoveKilometer"
                    :min="1"
                    :max="999"
                    :defaultValue="5"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="公里"
                  />&nbsp;&nbsp;触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">车辆多天未动</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.carUnmoveStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后绑定GPS的车辆多天未动将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <page-form-item class="w-full body" size="1" field="carUnmoveRentDay">
                  绑定了GPS且处于租赁中的车辆连续&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carUnmoveRentDay"
                    :min="1"
                    :max="180"
                    :defaultValue="1"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;无位置变动记录，触发待办提醒。
                </page-form-item>
                <page-form-item size="1" field="carUnmoveDay">
                  绑定了GPS且处于空闲可租和运维中的车辆连续&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carUnmoveDay"
                    :min="1"
                    :max="180"
                    :defaultValue="3"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;无位置变动记录，触发待办提醒。
                </page-form-item>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">车辆待巡检</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.carViewStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，长时间未巡检的车辆将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <page-form-item class="w-full body" size="1" field="carViewRentDay">
                  车辆在订单完成交车后连续&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carViewRentDay"
                    :min="1"
                    :max="180"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;无还车和换车的操作，触发待办提醒。
                </page-form-item>
                <page-form-item class="w-full body" size="1" field="carViewDay">
                  车辆在运维单开始维修后连续&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carViewDay"
                    :min="1"
                    :max="180"
                    :defaultValue="5"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;无完成运维的操作，触发待办提醒。
                </page-form-item>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="oilDiff">
              <section>
                <div class="flex">
                  <span class="title">车辆油电量异常</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.oilErrorStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，油电量异常将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  交车油电量比当前车辆上次的还车油电量差&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.oilDiff"
                    :min="1"
                    :max="99999"
                    unit=""
                    :defaultValue="1"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                  />&nbsp;&nbsp;以上时，触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="mileageDiff">
              <section>
                <div class="flex">
                  <span class="title">车辆里程异常</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.mileageErrorStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，公里数异常将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  交车或入厂公里数比当前车辆的公里数差&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.mileageDiff"
                    :min="1"
                    :max="999"
                    :defaultValue="5"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="公里"
                  />&nbsp;&nbsp;以上，触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider id="insureCompulsoryDay" class="child_divider" />
            <page-form-item size="1" field="insureCompulsoryDay">
              <section @click="onClickActive" class="relative">
                <div v-if="query.type === 'insureCompulsoryDay'" class="active-border"></div>
                <div class="flex">
                  <span class="title">交强险即将到期</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.insureCompulsoryStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，交强险到期前将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  距交强险到期日剩余&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.insureCompulsoryDay"
                    :min="1"
                    :max="180"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;和已超交强险到期日的车辆，触发预警提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" id="insureBusinessDay" />
            <page-form-item size="1" field="insureBusinessDay">
              <section @click="onClickActive" class="relative">
                <div v-if="query.type === 'insureBusinessDay'" class="active-border"></div>
                <div class="flex">
                  <span class="title">商业险即将到期</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.insureBusinessStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，商业险到期前将不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  距商业险到期日剩余&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.insureBusinessDay"
                    :min="1"
                    :max="180"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;和已超商业险到期日的车辆，触发预警提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider id="maintenance" class="child_divider" />
            <page-form-item size="1">
              <section @click="onClickActive" class="relative">
                <div v-if="query.type === 'maintenance'" class="active-border"></div>
                <div class="flex">
                  <span class="title">即将保养</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.maintenanceBeforeStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，即将需要保养的车辆不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="flex w-full body">
                  <page-form-item size="1" field="maintenanceLimitDay">
                    保养间隔时间 &nbsp;&nbsp;
                    <i-input-number
                      v-model="todoDetail.maintenanceLimitDay"
                      :min="1"
                      :max="9999"
                      :defaultValue="180"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="天"
                    />&nbsp;&nbsp;
                    <span class="gray">（用途：在保养单中填写完本次保养日期后，会根据保养间隔时间的配置自动计算出下次保养日期）</span>
                  </page-form-item>
                  <page-form-item size="1" field="maintenanceBeforeDay">
                    距保养到期日剩余 &nbsp;&nbsp;<i-input-number
                      v-model="todoDetail.maintenanceBeforeDay"
                      :min="1"
                      :max="360"
                      :defaultValue="30"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="天"
                    />&nbsp;&nbsp;和已超保养到期日的车辆，触发预警提醒。
                  </page-form-item>
                </div>
                <div class="flex w-full body">
                  <page-form-item size="1" field="maintenanceLimitMileage">
                    保养间隔里程&nbsp;&nbsp;
                    <i-input-number
                      v-model="todoDetail.maintenanceLimitMileage"
                      :min="1"
                      :max="99999"
                      :defaultValue="5000"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="公里"
                    />&nbsp;&nbsp;
                    <span class="gray">（用途：在保养单中填写完本次保养里程后，会根据保养间隔里程的配置自动计算出下次保养里程）</span>
                  </page-form-item>
                  <page-form-item size="1" field="maintenanceBeforeMileage">
                    距下次保养里程剩余&nbsp;&nbsp;<i-input-number
                      v-model="todoDetail.maintenanceBeforeMileage"
                      :min="1"
                      :max="99999"
                      :defaultValue="700"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="公里"
                    />&nbsp;&nbsp;和已超下次保养里程的车辆，触发预警提醒。
                  </page-form-item>
                </div>
              </section>
            </page-form-item>
            <a-divider id="inspection" class="child_divider" />
            <page-form-item size="1">
              <section @click="onClickActive" class="relative">
                <div v-if="query.type === 'inspection'" class="active-border"></div>
                <div class="flex">
                  <span class="title">即将年检</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.inspectionBeforeStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，即将需要年检的车辆不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="flex w-full body">
                  <page-form-item size="1" field="inspectionLimitDay">
                    年检间隔时间 &nbsp;&nbsp;
                    <i-input-number
                      v-model="todoDetail.inspectionLimitDay"
                      :min="1"
                      :max="9999"
                      :defaultValue="180"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="天"
                    />&nbsp;&nbsp;
                    <span class="gray">（用途：在年检单中填写完本次年检日期后，会根据年检间隔时间的配置自动计算出下次年检日期）</span>
                  </page-form-item>
                  <page-form-item size="1">
                    距年检到期日剩余&nbsp;&nbsp;<i-input-number
                      v-model="todoDetail.inspectionBeforeDay"
                      :min="1"
                      :max="360"
                      :defaultValue="30"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="天"
                    />&nbsp;&nbsp;和已超年检到期日的车辆，触发预警提醒。
                  </page-form-item>
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1">
              <section @click="onClickActive" class="relative">
                <div class="flex">
                  <span class="title">违章待查询</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.violationQueryStatus"
                    size="small"
                  />
                  <a-tooltip content="在此设置自动查询违章规则，如关闭则不在提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="flex w-full body">
                  <page-form-item size="1" field="violationQueryOrderReturnDay">
                    订单状态变更为已还车后&nbsp;&nbsp;
                    <i-input-number
                      v-model="todoDetail.violationQueryOrderReturnDay"
                      :min="1"
                      :max="360"
                      :defaultValue="30"
                      :allow-clear="false"
                      :precision="0"
                      :style="{ width: '150px' }"
                      unit="天"
                    />&nbsp;&nbsp;，车辆未查询违章，则触发待办提醒。
                  </page-form-item>
                </div>
              </section>
            </page-form-item>
            <a-divider />
          </page-form-row>
        </card>
        <!-- 结算待办 -->
        <card class="custom-card" :headerStyle="{ padding: '0 0 20px' }" title="结算待办" :showDivider="false">
          <page-form-row>
            <page-form-item size="1" field="industryBillDay">
              <section>
                <div class="flex">
                  <span class="title">同行费用即将结算</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.industryBillStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后,即将到达应结日期的供应商费用不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  同行下待确认的费用的应结日期前&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.industryBillDay"
                    :min="1"
                    :max="180"
                    :defaultValue="7"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;和超过应结日期还未确认的费用，触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="supplierBillDay">
              <section>
                <div class="flex">
                  <span class="title">供应商费用即将结算</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.supplierBillStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后,即将到达应结日期的供应商费用不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  供应商下待确认的费用的应结日期前&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.supplierBillDay"
                    :min="1"
                    :max="180"
                    :defaultValue="7"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;和超过应结日期还未确认的费用，触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="czsFeeBillBeforeDay">
              <section>
                <div class="flex">
                  <span class="title">长租订单即将结算</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.czsFeeBillStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，即将到达应结日期的长租订单费用不再进行待办提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  长租订单待确认的费用的应结日期前&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.czsFeeBillBeforeDay"
                    :min="1"
                    :max="180"
                    :defaultValue="3"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;天和超过应结日期还未确认的费用，触发待办提醒。
                </div>
              </section>
            </page-form-item>
            <a-divider />
          </page-form-row>
        </card>
        <!-- 押金代办 -->
        <card class="custom-card" :headerStyle="{ padding: '0 0 20px' }" title="押金待办" :showDivider="false">
          <page-form-row>
            <page-form-item size="1" field="depositOrderGiveUnpayMinute">
              <section>
                <div class="flex">
                  <span class="title">短租订单租车押金未缴纳提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositOrderGiveUnpayStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单交车后未缴纳押金的将不在提醒；芝麻免押和线下押金通用">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  短租订单在交车&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositOrderGiveUnpayMinute"
                    :min="0"
                    :max="9999"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;后，订单关联的租车押金状态仍为应收未收的，触发提醒
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="depositOrderReturnUnrefundMinute">
              <section>
                <div class="flex">
                  <span class="title">短租订单租车押金应退未退提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositOrderReturnUnrefundStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单还车后租车押金应退未退的将不在提醒；芝麻免押和线下押金通用">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  短租订单在还车/完成/取消/作废&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositOrderReturnUnrefundMinute"
                    :min="0"
                    :max="99999"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;后，订单关联的租车押金状态仍为应退未退的，触发提醒
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="depositOrderViolationUnrefundHour" v-if="alipaySwitch">
              <section>
                <div class="flex">
                  <span class="title">短租订单违章押金应退未退提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositOrderViolationUnrefundStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单违章押金到达预计解冻时间后违章押金仍为应退未退的将不在提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  通过芝麻免押的押金，租车转违章后违章押金达到预计解冻时间&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositOrderViolationUnrefundHour"
                    :min="0"
                    :max="9999"
                    :defaultValue="8"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="小时"
                  />&nbsp;&nbsp;后，违章押金状态仍为应退未退的，触发提醒
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="depositCarFreezeDueDay" v-if="alipaySwitch">
              <section>
                <div class="flex">
                  <span class="title">短租订单租车押金即将到期提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositCarFreezeDueStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单中冻结中的租车押金提前规则天数到达预计解冻天数的将不在提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  通过芝麻免押的押金，租车押金距离预计解冻&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositCarFreezeDueDay"
                    :min="0"
                    :max="999"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;前，租车押金状态为应收已收或应退未退的，触发提醒
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="depositViolationFreezeDueDay">
              <section>
                <div class="flex">
                  <span class="title">短租订单违章押金即将到期提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositViolationFreezeDueStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单中冻结中的违章押金提前规则天数到达预计解冻天数的将不在提醒；芝麻免押和线下押金通用">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  违章押金距离预计解冻&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositViolationFreezeDueDay"
                    :min="0"
                    :max="999"
                    :defaultValue="7"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;前，违章押金状态为应收已收或应退未退的，触发提醒
                </div>
              </section>
            </page-form-item>
            <a-divider class="child_divider" />
            <page-form-item size="1" field="depositMemberFreezeDueDay" v-if="alipaySwitch">
              <section>
                <div class="flex">
                  <span class="title">短租订单承租人唯一租车押金即将到期提醒</span>
                  <a-switch
                    checked-color="#165DFF"
                    class="switch"
                    :checked-value="1"
                    :unchecked-value="0"
                    v-model="todoDetail.depositMemberFreezeDueStatus"
                    size="small"
                  />
                  <a-tooltip content="关闭后，短租线下订单中承租人只有一笔冻结中的租车押金且提前规则天数到达预计解冻天数的将不在提醒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969" />
                  </a-tooltip>
                </div>
                <div class="w-full body">
                  通过芝麻免押的押金，承租人只有一笔冻结中的租车押金时，租车押金距离预计解冻&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.depositMemberFreezeDueDay"
                    :min="0"
                    :max="999"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;前，违章押金状态为应收已收或应退未退的，触发提醒
                </div>
              </section>
            </page-form-item>
          </page-form-row>
        </card>
      </page-form>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted, onActivated, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import useUserStore from '@/store/modules/user'

  const userStore = useUserStore()
  userStore.setEpDetail()
  const alipaySwitch = computed(() => {
    return userStore?.syncInventory?.alipaySwitch == 1
  })

  const route = useRoute()
  const query = ref(route.query)

  const props = defineProps({
    form: {
      type: Object,
      default: () => ({}),
    },
  })

  const rules = {
    giveTimeBefore: [{ required: true, message: '请输入', trigger: 'blur' }],
    carVehicleErrorStatus: [{ required: true, message: '请输入', trigger: 'blur' }],
    carAbnormalMoveStatus: [{ required: true, message: '请输入', trigger: 'blur' }],
    carUnmoveRentDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    carUnmoveDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    carViewRentDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    carViewDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    oilDiff: [{ required: true, message: '请输入', trigger: 'blur' }],
    mileageDiff: [{ required: true, message: '请输入', trigger: 'blur' }],
    insureCompulsoryDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    insureBusinessDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    maintenanceLimitDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    maintenanceBeforeDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    maintenanceLimitMileage: [{ required: true, message: '请输入', trigger: 'blur' }],
    maintenanceBeforeMileage: [{ required: true, message: '请输入', trigger: 'blur' }],
    inspectionLimitDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    inspectionBeforeDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    industryBillDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    supplierBillDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    czsFeeBillBeforeDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    // 押金
    depositOrderGiveUnpayMinute: [{ required: true, message: '请输入', trigger: 'blur' }],
    depositOrderReturnUnrefundMinute: [{ required: true, message: '请输入', trigger: 'blur' }],
    depositOrderViolationUnrefundHour: [{ required: true, message: '请输入', trigger: 'blur' }],
    depositCarFreezeDueDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    depositViolationFreezeDueDay: [{ required: true, message: '请输入', trigger: 'blur' }],
    depositMemberFreezeDueDay: [{ required: true, message: '请输入', trigger: 'blur' }],
  }
  const formRef = ref()
  const save = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((valid: any) => {
        if (valid) {
          reject()
          return false
        }
        console.log(todoDetail.value, 'todoDetail')

        resolve(todoDetail.value)
      })
    })
  }

  const onClickActive = () => {
    const el: any = document.querySelector('.active-border')
    if (el) {
      el.classList.remove('active-border')
    }
  }

  onActivated(() => {
    const el: any = document.querySelector(`#${query.value.type}`)
    if (el) {
      setTimeout(() => {
        el.scrollIntoView({
          behavior: 'smooth',
        })
      })
      // 重新赋值，防止激活后蓝色边框不显示
      query.value.type = query.value.type
    }
  })

  onMounted(() => {
    const el: any = document.querySelector(`#${query.value.type}`)
    if (el) {
      setTimeout(() => {
        el.scrollIntoView({
          behavior: 'smooth',
        })
      })
    }
  })

  const todoDetail = ref<any>()
  watch(
    () => props.form,
    (val: any) => {
      todoDetail.value = val
    },
    { immediate: true, deep: true }
  )

  defineExpose({
    save,
  })
</script>

<style lang="less" scoped>
  .rule-box {
    padding: 0 20px;
  }
  .active-border {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 1px solid #165dff;
  }
  .custom-card {
    overflow: hidden;
  }
  .child_divider {
    margin-left: 80px;
    margin-right: 80px;
    min-width: inherit;
  }
  .rule-container {
    section {
      width: 100%;
    }
    .flex {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .body {
      padding: 15px 20px;
      background: rgba(247, 248, 250, 0.5);
    }
    .edit-btn {
      width: 60px;
      position: absolute;
      right: 50px;
      z-index: 999;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
    }
    .switch {
      margin: 0 5px 0 35px;
    }
    .w-full {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    :deep(.arco-form-item) {
      margin-bottom: 0;
    }
  }
  .gray {
    color: #4e5969;
  }
</style>
